<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>i movie</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
    <style>
        .div_imgall {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .input_flie {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 100;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pre-pic{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        function showImg(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg1(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg1").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg2(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg2").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg3(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg3").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg4(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg4").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
        function showImg5(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg5").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
    </script>
</head>
<body>
<input type="text" name="title" id="title" required  lay-verify="required" placeholder="输入电影进行搜索" autocomplete="off" class="layui-input" style="width: 500px;display: inline-block">
<button class="layui-btn layui-btn-primary" id="search">搜索</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col width="200">
        <col width="200">
    </colgroup>
    <thead>
    <tr>
        <th>电影名</th>
        <th>英文名</th>
        <th>海报</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${movies.list}" var="item">
        <tr>
            <td>${item.name}</td>
            <td>${item.ename}</td>
            <td><img src="${item.cover}" style="width: 70px">
            </td>
            <th><button class="layui-btn layui-btn-normal" onclick="changeStatus(${item.id})">修改</button></th>
        </tr>
    </c:forEach>
    </tbody>
</table>
<nav style="text-align: center">
    <ul class="detail-pager" id="pagination" ></ul>
    <ul class="detail-pager" id="pagination1" ></ul>
</nav>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <input type="hidden" id="id" name="id">
            <div class="modal-content">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">电影名</label>
                        <div class="layui-input-block">
                            <input id="name" type="text" name="name" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">英文名</label>
                        <div class="layui-input-block">
                            <input type="text" id="ename" name="ename" required  lay-verify="required" placeholder="请输入电影英文名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <select  name="type" required lay-verify="required" id="type">
                                    <option value="">类型</option>
                                    <c:forEach items="${types}" var="item">
                                        <option value="${item.type_name}">${item.type_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="area" required lay-verify="required" id="country">
                                    <option value="">地区</option>
                                    <c:forEach items="${areas}" var="item">
                                        <option value="${item.country_id}">${item.country_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="year" required lay-verify="required" id="year">
                                    <option value="">年代</option>
                                    <c:forEach items="${years}" var="item">
                                        <option value="${item.year_id}">${item.year_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="mov_type" required lay-verify="required" id="mov_type">
                                    <option value="">电影分类</option>
                                    <option value="1">正在热映</option>
                                    <option value="2">即将上映</option>
                                    <option value="3">经典电影</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="effect" required lay-verify="required" id="effect">
                                    <option value="">电影特效</option>
                                    <option value="2D">2D</option>
                                    <option value="3D">3D</option>
                                    <option value="2DIMAX">2DIMAX</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px">上映时间</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="text" name="time" required  lay-verify="required" placeholder="请输入上映时间" autocomplete="off" class="layui-input" id="time">
                            </div>
                            <div class="layui-inline">
                                <input type="text" name="duration" required  lay-verify="required" placeholder="请输入电影时长" autocomplete="off" class="layui-input" id="duration">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label form-label" style="width: 100px">电影简介</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入电影简介" class="layui-textarea" required lay-verify="required" name="desc" id="desc"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text" style="min-height: 200px">
                        <label class="layui-form-label form-label" style="width: 100px">演职人员</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg"/><br>
                                        <span style="position: absolute;top: 170px;left: 20px">电影海报</span>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg1"/>
                                        <input type="text" id="director" name="director" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg2"/>
                                        <input type="text" id="actor1" name="actor1" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员一">
                                        <input type="text" id="actorRole1" name="actorRole1" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg3"/><br>
                                        <input type="text" id="actor2" name="actor2" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员二">
                                        <input type="text" id="actorRole2" name="actorRole2" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg4"/><br>
                                        <input type="text"  id="actor3" name="actor3" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员三">
                                        <input type="text" id="actorRole3" name="actorRole3" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg5"/><br>
                                        <input type="text" id="actor4" name="actor4" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员四">
                                        <input type="text" id="actorRole4" name="actorRole4" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-form-item" style="min-height: 100px">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" style="position: absolute;top: 60px">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script>
    $(function () {
        layui.use(['table','layer'], function() {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                console.log(data.field)
                NProgress.start();
                var formData = new FormData();
                formData.append('id',data.field.id);
                formData.append('name',data.field.name);
                formData.append('ename',data.field.ename);
                formData.append("type",data.field.type);
                formData.append("area",data.field.area);
                formData.append("year",data.field.year);
                formData.append("time",data.field.time);
                formData.append("duration",data.field.duration);
                formData.append("director",data.field.director);
                formData.append("mov_type",data.field.mov_type);
                formData.append("effect",data.field.effect);
                formData.append("desc",data.field.desc)
                formData.append("desc",data.field.desc)
                formData.append("actor1",data.field.actor1)
                formData.append("actor2",data.field.actor2)
                formData.append("actor3",data.field.actor3)
                formData.append("actor4",data.field.actor4)
                formData.append("actorRole1",data.field.actorRole1)
                formData.append("actorRole2",data.field.actorRole2)
                formData.append("actorRole3",data.field.actorRole3)
                formData.append("actorRole4",data.field.actorRole4)
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/updateMovie',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
            $('#search').click(function () {
                console.log(123)
                if($('#title').val()==''){
                    layer.msg('输入关键词');
                }else{
                    NProgress.start();
                    $('#pagination').remove();
                    $.ajax({
                        url:'${pageContext.request.contextPath}/backend/movie/searchMovie',
                        dataType: "json",
                        type:'POST',
                        data:{username:$('#title').val()},
                        success:function (data) {
                            NProgress.done();
                            var html = template('temp1',{list:data.data.list});
                            $('#userList').html(html);
                            if(data.data.total!=0){
                                //$('#footer').removeClass('fix');
                                $('#pagination1').show();
                                $('#pagination1').bootstrapPaginator({
                                    //主版本号
                                    bootstrapMajorVersion: 3,
                                    //当前页
                                    currentPage: data.data.pageNum,
                                    //总页数
                                    totalPages: data.data.pages,

                                    //显示分页条信息
                                    itemTexts: function (type, page, current) {
                                        switch (type) {
                                            case "first":
                                                return "首页";
                                            case "prev":
                                                return "上一页";
                                            case "next":
                                                return "下一页";
                                            case "last":
                                                return "尾页";
                                            case "page":
                                                return page;
                                        }
                                    },
                                    onPageClicked:function (event, originalEvent, type, page) {
                                        $.ajax({
                                            url:'${pageContext.request.contextPath}/backend/movie/searchMovie',
                                            async:true,
                                            data:{username:$('#title').val(),pageNum:page},
                                            dataType: "json",
                                            type:'POST',
                                            success:function (data) {
                                                var html = template('temp1',{list:data.data.list});
                                                $('#userList').html(html);
                                                NProgress.done();
                                            }
                                        })
                                    },
                                });
                            }else{
                                $('#pagination1').hide();
                                $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
                            }
                        }
                    })
                }
            })
        });
        if((${movies.total})==0){
            $('#pagination').hide();
            $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
        }else{
            $('#pagination').bootstrapPaginator({
                //主版本号
                bootstrapMajorVersion: 3,
                //当前页
                currentPage: ${movies.pageNum},
                //总页数
                totalPages: ${movies.pages},
                //请求url
                pageUrl: function (type, page, current) {
                    return '${pageContext.request.contextPath}/backend/movie/movieEdit?pageNum='+page;
                },
                //显示分页条信息
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
            });
        }

    })
    function changeStatus(id) {
        $('#id').val(id);
        $.ajax({
            url:'${pageContext.request.contextPath}/backend/movie/'+id,
            async:true,
            dataType: "json",
            type:'POST',
            success:function (data) {
                $('#myLargeModalLabel').modal('show');
                console.log(data);
                $('#name').val(data.data.name);
                $('#ename').val(data.data.ename);
                var select = 'dd[lay-value=' +data.data.types+ ']';
                $('#type').siblings("div.layui-form-select").find('dl').find(select).click();
                var select1 = 'dd[lay-value=' +data.data.countryName+ ']';
                $('#country').siblings("div.layui-form-select").find('dl').find(select1).click();
                console.log($('#country').siblings("div.layui-form-select").find('dl'));
                var select2 = 'dd[lay-value=' +data.data.yearName+ ']';
                $('#year').siblings("div.layui-form-select").find('dl').find(select2).click();
                var select3 = 'dd[lay-value=' +data.data.typeName+ ']';
                $('#mov_type').siblings("div.layui-form-select").find('dl').find(select3).click();
                var select4 = 'dd[lay-value=' +data.data.effect+ ']';
                $('#effect').siblings("div.layui-form-select").find('dl').find(select4).click();
                $("#time").val(data.data.time);
                $('#duration').val(data.data.duration);
                $('#desc').text(data.data.desc);
                $('#preImg').attr("src",data.data.cover);
                console.log(data.data.actors[0])
                $('#preImg1').attr("src",data.data.directorPic);
                $('#preImg2').attr("src",data.data.actors[0].pic);
                $('#preImg3').attr("src",data.data.actors[1].pic);
                $('#preImg4').attr("src",data.data.actors[2].pic);
                $('#preImg5').attr("src",data.data.actors[3].pic);
                $("#director").val(data.data.director);
                $("#actor1").val(data.data.actors[0].name);
                $("#actor2").val(data.data.actors[1].name);
                $("#actor3").val(data.data.actors[2].name);
                $("#actor4").val(data.data.actors[3].name);
                $("#actorRole1").val(data.data.actors[0].roleName);
                $("#actorRole2").val(data.data.actors[1].roleName);
                $("#actorRole3").val(data.data.actors[2].roleName);
                $("#actorRole4").val(data.data.actors[3].roleName);
            }
        })
    }
</script>
<script type="text/html" id="temp1">
    {{each list item index}}
    <tr>
        <td>{{item.name}}</td>
        <td>{{item.ename}}</td>
        <td><img src="{{item.cover}}" style="width: 70px">
        </td>
        <td><button class="layui-btn layui-btn-normal" onclick="changeStatus({{item.id}})">修改</button></td>
    </tr>
    {{/each}}
</script>
</body>
</html>
